<template>
	<view class="processDetial">
		<!-- 内容2 审批流程 -->
		<view class="spBox">
			<view class="titles">
				审批流程
			</view>
			<view class="spList">
				<view class="items" v-for="(item,index) in approvalInfo.activityNodes" :key="item.id">
					<view class="iconBox">
						<u-icon name="account" color="#fff" size="22"></u-icon>
						<!-- 状态 -->
						<view :class="item.status == 2 ? 'ztBox' : (item.status == 1 ? 'jzz' : (item.status == -1 ? 'wks' : 'jj'))">
							<view class="">
								<u-icon name="checkmark" color="#fff" size="12" v-if="item.status == 2"></u-icon>
								<u-icon name="edit-pen" color="#fff" size="12" v-else-if="item.status == 1"></u-icon>
								<u-icon name="clock" color="#fff" size="12" v-else-if="item.status == -1"></u-icon>
								<u-icon name="close" color="#fff" size="12" v-else-if="item.status == 3"></u-icon>
							</view>
						</view>
					</view>
					<view class="conBox">
						<view class="title">{{item.name}}</view>
						<block v-if="item.status == 2 || item.status == 1">
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.tasks" :key="tasksIndex">
								<view class="names">{{tasksItem.assigneeUser ? tasksItem.assigneeUser.nickname : ''}}</view>
								<view class="infos" v-if="index != 0 && item.status != 1">审批意见：{{tasksItem.reason}}</view>
							</view>
						</block>
						<block v-else>
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.tasks" :key="tasksIndex">
								<view class="names">{{tasksItem.assigneeUser ? tasksItem.assigneeUser.nickname : ''}}</view>
								<view class="infos" v-if="index != 0 && item.status != 1">审批意见：{{tasksItem.reason}}</view>
							</view>
							<view class="itemCon" v-for="(tasksItem,tasksIndex) in item.candidateUsers" :key="tasksIndex">
								<view class="names">{{tasksItem.nickname}}</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容3 审批操作 -->
		<view class="spOperate" v-show="this.approvalInfo.status == 1 && this.approvalInfo.todoTask && this.approvalInfo.todoTask.status == 1">
			<!-- <uni-forms ref="formData" :modelValue="formData" :label-width="100" :rules="rulesTwo" v-if="this.spFormData.type == 1">
				<view class="ldpsBox" v-if="this.approvalInfo.todoTask.name == '主任审批'">
					<view class="">领导批示</view>
					<uni-forms-item label="批示内容" name="memorandum">
						<uni-easyinput type="text" v-model="formData.memorandum" placeholder="请输入批示内容" />
					</uni-forms-item>
					<uni-forms-item label="领导签字" name="electronicSignature">
						<sign v-model="formData.electronicSignature" />
					</uni-forms-item>
					<uni-forms-item label="选择分管领导" name="distributorDetails">
						<userMultiple v-model="formData.distributorDetails" />
					</uni-forms-item>
				</view>
				<block v-if="this.approvalInfo.todoTask.taskDefinitionKey == 'Activity_d5fd2eae-c027-4e43-a221-a18de6636c9e'">
					<block v-for="(item,index) in formData.distributorDetails">
						<view class="ldpsBox" v-if="item.userId == userInfo.id">
							<view class="">分管主任审批</view>
							<uni-forms-item label="批示内容" :name="['distributorDetails',index,'remark']" :rules="[{'required': true,errorMessage: '请输入批示内容'}]">
								<uni-easyinput type="text" v-model="item.remark" placeholder="请输入批示内容" />
							</uni-forms-item>
							<uni-forms-item label="领导签字" :name="['distributorDetails',index,'signature']" :rules="[{'required': true,errorMessage: '请签字'}]">
								<sign v-model="item.signature" />
							</uni-forms-item>
							<uni-forms-item label="选择科长" :name="['distributorDetails',index,'distributorDetails']" :rules="[{'required': true,errorMessage: '请选择科长'}]">
								<userMultiple v-model="item.distributorDetails" />
							</uni-forms-item>
						</view>
					</block>
				</block>
				<block v-if="this.approvalInfo.todoTask.taskDefinitionKey == 'Activity_29585bae-43eb-4220-8c7d-3196a45d9a1c'">
					<block v-for="(item,index) in formData.distributorDetails">
						<block v-for="(items,indexs) in item.distributorDetails">
							<view class="ldpsBox" v-if="items.userId == userInfo.id">
								<view class="">科长意见</view>
								<uni-forms-item label="批示内容" :name="['distributorDetails',index,'distributorDetails',indexs,'remark']" :rules="[{'required': true,errorMessage: '请输入批示内容'}]">
									<uni-easyinput type="text" v-model="items.remark" placeholder="请输入批示内容" />
								</uni-forms-item>
								<uni-forms-item label="领导签字" :name="['distributorDetails',index,'distributorDetails',indexs,'signature']" :rules="[{'required': true,errorMessage: '请签字'}]">
									<sign v-model="items.signature" />
								</uni-forms-item>
								<uni-forms-item label="选择传阅科员" :name="['distributorDetails',index,'distributorDetails',indexs,'distributorDetails']" :rules="[{'required': true,errorMessage: '请选择传阅科员'}]">
									<userMultiple v-model="items.distributorDetails" />
								</uni-forms-item>
							</view>
						</block>
					</block>
				</block>
			</uni-forms> -->
			<uni-forms ref="form" :modelValue="spFormData" :label-width="100" :rules="rules">
				<uni-forms-item label="审批类型" name="type">
					<uni-data-select
					    v-model="spFormData.type"
					    :localdata="typeList"
						placeholder="请选择审批类型"
						@change="changeType"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item :label="spFormData.type == 7 ? '退回理由' : '审批理由'" name="reason">
					<uni-easyinput v-model="spFormData.reason" placeholder="请输入审批理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="抄送人" name="copyUserIds" v-if="spFormData.type == 3">
					<userSystemMultiple v-model="spFormData.copyUserIds" />
				</uni-forms-item>
				<uni-forms-item label="转办人" name="assigneeUserId" v-if="spFormData.type == 4">
					<userSystemMultiple v-model="spFormData.assigneeUserId" :isMultiple="false" />
				</uni-forms-item>
				<uni-forms-item label="接收人" name="delegateUserId" v-if="spFormData.type == 5">
					<userSystemMultiple v-model="spFormData.delegateUserId" :isMultiple="false" />
				</uni-forms-item>
				<block v-if="spFormData.type == 6">
					<uni-forms-item label="加签处理人" name="addSignUserIds">
						<userSystemMultiple v-model="spFormData.addSignUserIds" />
					</uni-forms-item>
					<uni-forms-item label="加签类型" name="signType">
						<uni-data-select
						    v-model="spFormData.signType"
						    :localdata="signTypeList"
							placeholder="请选择加签类型"
						></uni-data-select>
					</uni-forms-item>
				</block>
				<block v-if="spFormData.type == 7">
					<uni-forms-item label="退回节点" name="targetTaskDefinitionKey">
						<uni-data-select
						    v-model="spFormData.targetTaskDefinitionKey"
						    :localdata="returnList"
							placeholder="请选择退回节点"
						></uni-data-select>
					</uni-forms-item>
				</block>
				<!-- 选择通过 -->
				<block v-if="spFormData.type == 1">
					<uni-forms-item label="领导签字" name="signPicUrl">
						<sign v-model="spFormData.signPicUrl" />
					</uni-forms-item>
					<uni-forms-item label="选择人员" name="distributorDetails">
						<userMultiple v-model="spFormData.distributorDetails" />
					</uni-forms-item>
				</block>
			</uni-forms>
			<button class="button" @click="submit" type="primary">提交</button>
		</view>
		<!-- 签名选择 -->
		<u-action-sheet :actions="list" title="选择签名方式" :show="show" @select="selectList" @close="actionClose" closeOnClickOverlay></u-action-sheet>
	</view>
</template>

<script>
	import {getApprovalDetail,approveTaskCirculation,rejectTask,getTaskListByProcessInstanceId} from '@/api/oa/common.js'
	import {copyTask,transferTask,delegateTask,signCreateTask,returnTask,getTaskListByReturn} from '@/api/oa/common.js'
	import userMultiple from '@/components/user/userMultiple.vue'
	import sign from '@/components/common/sign.vue'
	import {httpStrToArr} from '@/utils/common.js'
	import userSystemMultiple from '@/components/user/userSystemMultiple'
	export default {
		components:{
			userMultiple,
			sign,
			userSystemMultiple
		},
		props:{
			processId:"",
			approvalInfo:{},
			propFromData:{}
		},
		watch:{
			propFromData(val){
				console.log(val.distributorDetails)
				let newArr = [];
				if(val.distributorDetails.length > 0){
					val.distributorDetails.forEach(item=>{
						newArr.push({
							type: item.type,
							  userId: item.userId,
							  userName: item.userName,
							  status: item.status,
							  remark: item.remark,
							  signature: item.signature,
							  distributorDetails: item.distributorDetails
						})
					})
				}
				// let arr =httpStrToArr(val.files);
				this.formData = val;
				this.formData.distributorDetails = newArr;
				console.log(this.formData)
				// this.formData.files = arr;
				if(this.formData.suggestedByPeoples.length > 0){
					this.selectPeople = false
					this.rules.distributorDetails.rules[0].required = false
				}else{
					this.selectPeople = true
					this.rules.distributorDetails.rules[0].required = true
				}
			},
		},
		data() {
			return {
				processArr:[],
				// 审批表单
				spFormData:{
					type:'',
					reason:'',
					distributorDetails:[],
					signPicUrl:''
				},
				rules: {
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择审批类型'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请输入审批理由'
						}]
					},
					copyUserIds: {
						rules: [{
							required: true,
							errorMessage: '请选择抄送人'
						}]
					},
					assigneeUserId: {
						rules: [{
							required: true,
							errorMessage: '请选择转办人'
						}]
					},
					delegateUserId: {
						rules: [{
							required: true,
							errorMessage: '请选择接收人'
						}]
					},
					addSignUserIds: {
						rules: [{
							required: true,
							errorMessage: '请选择加签处理人'
						}]
					},
					signType: {
						rules: [{
							required: true,
							errorMessage: '请选择加签类型'
						}]
					},
					targetTaskDefinitionKey: {
						rules: [{
							required: true,
							errorMessage: '请选择退回节点'
						}]
					},
					signPicUrl:{
						rules: [{
							required: true,
							errorMessage: '请选择签名'
						}]
					},
					distributorDetails:{
						rules: [{
							// this.formData.suggestedByPeoples.length <= 0
							required: this.selectPeople,
							errorMessage: '请选择人员'
						}]
					}
				},
				// 是否必选人员
				selectPeople:false,
				rulesTwo:{
					memorandum: {
						rules: [{
							required: true,
							errorMessage: '请输入批示内容',
						}]
					},
					electronicSignature: {
						rules: [{
							required: true,
							errorMessage: '请签字',
						}]
					},
					distributorDetails: {
						rules: [{
							required: true,
							errorMessage: '选择分管领导',
						}]
					},
				},
				// 当前登录用户信息
				userInfo:{},
				typeList:[
					{ value: 1, text: "通过" },
					{ value: 2, text: "拒绝" },
					{ value: 3, text: "抄送" },
					{ value: 4, text: "转办" },
					{ value: 5, text: "委派" },
					{ value: 6, text: "加签" },
					{ value: 7, text: "回退" },
				],
				// 加签类型
				signTypeList:[
					{ value: "after", text: "向后加签" },
					{ value: "before", text: "向前加签" },
				],
				// 退回节点列表
				returnList:[],
				
				formData:{
					// memorandum:'',
					electronicSignature:'',
					// distributorDetails:[],
				}
			};
		},
		methods:{
			// 获取当前审批步骤
			async getBz(){
				let info = await getTaskListByProcessInstanceId(this.processId);
				console.log(info)
				this.processArr = info.data;
			},
			changeDistributorDetails(arr,type){
				// 组合数据
				let newArr = []
				arr.forEach((item) => {
				    newArr.push({
						type: type,
						userId: item.id,
						userName: item.name
				    })
				})
				return newArr
			},
			// 点击提交审批
			async submit(){
				// 验证表单
				this.$refs.form.validate().then(async res => {
					uni.showLoading({
						title:'加载中'
					})
					let bpmFormJson = {
						id:this.approvalInfo.todoTask.id,
						reason:this.spFormData.reason,
						signPicUrl:this.spFormData.signPicUrl
					};
					
					// 判断选择的类型
					if(this.spFormData.type == 1){
						console.log(this.spFormData)
						// 通过
						let distributorDetails = this.spFormData.distributorDetails.map((item) => {
							let newItem = {
								userId: item.id,
								userName: item.name,
								type: 1,
								status: 1
							};
							return newItem
						})
						this.formData.distributorDetails = distributorDetails
						// this.$refs.formData.validate().then(async res => {
						// 	if(this.approvalInfo.todoTask.taskDefinitionKey == 'Activity_f7c06b88-3ced-44d5-9484-8fda679af8d4'){
						// 		this.formData.distributorDetails = this.changeDistributorDetails(this.formData.distributorDetails,1);
						// 	}else{
						// 		let distributorDetails = this.formData.distributorDetails.map((item) => {
						// 			let newItem = { ...item }
						// 			// 遍历科长
						// 			let kzArr = []
						// 			if (newItem.distributorDetails && newItem.distributorDetails.length > 0) {
						// 			  newItem.distributorDetails.forEach((items) => {
						// 				// 判断是否有科员
						// 				let kyArr = []
						// 				if (items.distributorDetails && items.distributorDetails.length > 0) {
						// 				  // 遍历科员
						// 				  items.distributorDetails.forEach((kyItem) => {
						// 					if (kyItem.userName) {
						// 					  kyArr.push({
						// 						type: kyItem.type,
						// 						userName: kyItem.userName,
						// 						userId: kyItem.userId
						// 					  })
						// 					} else {
						// 					  kyArr.push({
						// 						type: 3,
						// 						userName: kyItem.name,
						// 						userId: kyItem.id
						// 					  })
						// 					}
						// 				  })
						// 				}
						// 				items.distributorDetails = kyArr
							
						// 				if (items.userName) {
						// 				  kzArr.push({
						// 					type: items.type,
						// 					userName: items.userName,
						// 					userId: items.userId,
						// 					distributorDetails: items.distributorDetails,
						// 					signature: items.signature,
						// 					remark: items.remark
						// 				  })
						// 				} else {
						// 				  kzArr.push({
						// 					type: 2,
						// 					userName: items.name,
						// 					userId: items.id,
						// 					distributorDetails: items.distributorDetails
						// 					// signature: item.signature,
						// 					// remark: item.remark
						// 				  })
						// 				}
						// 			  })
						// 			}
						// 			newItem.distributorDetails = kzArr
						// 			return newItem
						// 		})
						// 		this.formData.distributorDetails = distributorDetails
						// 	}
							
						// 	// 判断类型
						// 	if(!Array.isArray(this.formData.electronicSignature)){
						// 		this.formData.electronicSignature = [this.formData.electronicSignature]
						// 	}
							
							let postData = {...this.formData};
							postData.bpmFormJson = bpmFormJson
							console.log(postData)
							let info = await approveTaskCirculation(postData);
							console.log(info)
							uni.hideLoading();
							uni.showToast({
								title:'提交成功'
							});
							// this.initFun();
							this.getBz();
							// 调用父组件
							this.$emit('init')
							this.spFormData={
								type:'',
								reason:'',
							}
						// }).catch(err => {
						// 	uni.hideLoading()
						// 	console.log('表单错误信息：', err);
						// })
					}else if(this.spFormData.type == 2){
						// 拒绝
						let info = await rejectTask(bpmFormJson)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						// this.initFun()
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 3){
						uni.hideLoading()
						// 抄送
						console.log(this.spFormData)
						let copyUserIds = this.spFormData.copyUserIds.map(item=>{
							return item.id
						})
						bpmFormJson.copyUserIds = copyUserIds;
						let info = await copyTask(bpmFormJson)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						// this.initFun()
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 4){
						// 转办
						uni.hideLoading()
						console.log(this.spFormData)
						bpmFormJson.assigneeUserId = this.spFormData.assigneeUserId.id;
						let info = await transferTask(bpmFormJson)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 5){
						// 委派
						uni.hideLoading()
						bpmFormJson.delegateUserId = this.spFormData.delegateUserId.id;
						let info = await delegateTask(bpmFormJson)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 6){
						// 加签
						uni.hideLoading()
						let userIds = this.spFormData.addSignUserIds.map(item=>{
							return item.id
						});
						bpmFormJson.userIds = userIds;
						bpmFormJson.type = this.spFormData.signType;
						let info = await signCreateTask(bpmFormJson)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}else if(this.spFormData.type == 7){
						// 回退
						uni.hideLoading()
						bpmFormJson.targetTaskDefinitionKey = this.spFormData.targetTaskDefinitionKey;
						let info = await returnTask(bpmFormJson)
						uni.hideLoading();
						uni.showToast({
							title:'提交成功'
						});
						this.getBz();
						// 调用父组件
						this.$emit('init')
						this.spFormData={
							type:'',
							reason:'',
						}
					}
				}).catch(err=>{
					console.log('表单错误信息：', err);
				})
			},
			// 审批类型
			async changeType(type){
				console.log(type);
				if(type == 7){
					// 回退
					let info = await getTaskListByReturn({
						id:this.approvalInfo.todoTask.id
					});
					this.returnList = info.data.map(item=>{
						return {
							text:item.name,
							value:item.taskDefinitionKey
						}
					})
				}
			},
		},
		mounted() {
			// this.userInfo = uni.getStorageSync('loginFrom')
			this.userInfo = this.$store.state.user.oaUser;
			this.getBz()
		}
	}
</script>

<style lang="less" scoped>
.spBox{
	width: 100%;
	height: auto;
	background-color: #fff;
	margin-top: 20rpx;
	overflow: hidden;
	padding-bottom: 20rpx;
	.titles{
		font-size: 30rpx;
		padding: 0 30rpx;
		color: #333;
		margin: 20rpx 0;
	}
	.spList{
		width: 100%;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		.items{
			display: flex;
			align-items: flex-start;
			margin-top: 20rpx;
			position: relative;
			z-index: 100;
			.iconBox{
				width: 60rpx;
				height: 60rpx;
				background-color: rgb(63 115 247);
				border-radius: 50%;
				color: #fff;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				flex: none;
				.ztBox,.jzz,.wks,.jj{
					position: absolute;
					width: 38rpx;
					height: 38rpx;
					background-color: #fff;
					display: flex;
					margin: 0 auto;
					border-radius: 50%;
					right: -10rpx;
					bottom: -10rpx;
					view{
						width: 34rpx;
						height: 34rpx;
						background-color: #00b32a;
						border-radius: 50%;
						margin: 0 auto;
						overflow: hidden;
						margin-top: 3rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.jzz{
					view{
						background-color: #337ecc;
					}
				}
				.wks{
					view{
						background-color: #ccc;
					}
				}
				.jj{
					view{
						background-color: red;
					}
				}
			}
			.conBox{
				flex: 1;
				min-height: 160rpx;
				background-color: rgba(234, 229, 234, 0.8);
				border-radius: 6rpx;
				padding: 20rpx;
				box-sizing: border-box;
				margin-left: 50rpx;
				.title{
					font-size: 30rpx;
					font-weight: bold;
				}
				.itemCon{
					.names,.infos{
						font-size: 24rpx;
					}
					.names{
						margin: 10rpx 0;
					}
					.infos{
						color: #8b8b8b;
					}
				}
				
			}
			&::after{
				content: '';
				display: block;
				border-left:2px solid #e4e7ed;
				height: 100%;
				position: absolute;
				left: 30rpx;
				top: 20rpx;
				z-index: -1;
			}
			&:first-child{
				margin-top: 0;
			}
			&:last-child{
				&::after{
					display: none;
				}
			}
		}
	}
}
.spOperate{
	width: 100%;
	height: auto;
	border-radius: 10rpx;
	background-color: #fff;
	padding: 50rpx;
	box-sizing: border-box;
	margin: 0 auto;
	margin-top: 20rpx;
}
.ldpsBox{
	background-color: antiquewhite;
	padding: 20rpx;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	/deep/.uni-easyinput__content{
		background-color: rgba(255, 255, 255, 0.1) !important;
	}
	.signImg{
		width: 100%;
		height: 80rpx;
	}
	.fgldps{
		width: 100%;
		height: auto;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}
}
</style>
